<template>
  <div class="main" v-if="price">
    <div class="address">
      <van-cell
        v-if="address"
        :title="address.city + address.county + address.addressDetail"
        is-link
        to="address"
      />
      <van-cell v-else title="请填写您的收货地址 " is-link to="address" />

      <hr />
    </div>
    <div class="lianxiren">
      <van-contact-card
        type="edit"
        :name="contactInfo.name"
        :tel="contactInfo.tel"
        @click="onEdit"
      />
    </div>

    <div class="card">
      <van-card
        :num="num"
        :price="price"
        :desc="desc"
        :title="title1"
        :thumb="imgUrl"
      />
      <hr />
      <van-cell
        style="margin-buttom: 10px"
        title=""
        :value="'共' + num + '件商品,￥' + num * price + '元'"
      />
    </div>
    <van-collapse v-model="activeNames">
      <van-field
        readonly
        clickable
        label="支付方式"
        :value="value"
        placeholder="                                   选择支付宝支付"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </van-collapse>

    <van-cell center title="匿名购买">
      <template #right-icon>
        <van-switch v-model="checked" size="24" />
      </template>
    </van-cell>
    <van-cell center title="同意《花加商城用户协议》,已知晓商品详情页提示信息">
      <template #right-icon>
        <van-switch v-model="checked1" size="24" />
      </template>
    </van-cell>

    <van-submit-bar
      :price="num * price * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>


<script>
import { mapState, mapMutations } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      value: "",
      showPicker: false,
      columns: ["支付宝支付", "微信支付"],
      checked: true,
      checked1: true,
      activeNames: ["1"],
      price: "",
      id: "",
      data1: "",
      imgUrl: "",
      title1: "",
      desc: "",
      num: 1,
      currentContact: {
        name: "",
        tel: "",
      },
    };
  },
  computed: {
    ...mapState([
      "appphone", // this.count => store.state.count
      "username",
      "address",
      "msg",
      "flag",
      "contactInfo",
    ]),
  },
  methods: {
    onConfirm(value) {
      //选择支付方式
      this.value = value;
      this.showPicker = false;
    },

    onEdit() {
      this.$router.push({ name: "person" });
    },
    onSubmit() {
      //提交支付
    },
  },

  mounted() {
    // console.log(this.Address.city);
    this.id = this.$route.query.id;
    console.log(this.$route.query.id);
    axios({
      method: "get",
      url: `http://localhost:3200/detail?id=${this.id} `,
    }).then((res) => {
      var data1 = res.data[0];
      console.log(data1);
      this.price = data1.price_min || data1.display_price_cd;
      this.imgUrl = data1.thumb || data1.banner_list[0].img;
      this.title1 = data1.title;
      this.desc = data1.subtitle || data1.sub_title;
      // console.log(data1);
    });
  },
};
</script>


<style  lang="scss" scoped>
.main {
  height: 100%;
}
</style>